<template>
	<view class="content">
		<view class="bg"></view>
		<uni-nav-bar fixed statusBar :title="navTitle" leftIcon="left" backgroundColor="transparent" :border="false" @clickLeft="clickLeft"></uni-nav-bar>

		<scroll-view :scroll-y="true" class="main">
			<view class="box4">
				<view class="box4_1" v-for="(item, index) in listData" :key="index" @click="changeMusicItem(item, index)">
					<view class="box4_1_l">
						<view>{{ item.name }}</view>
						<view>
							<text>作者：{{ item.author || '--' }}</text>
							<text>类型：{{ item.album || '--' }}</text>
						</view>
					</view>
					<uni-icons type="right" size="20" color="#999999"></uni-icons>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import API from '@/utils/api.js';
import { handleTree } from '@/utils/index.js';
export default {
	data() {
		return {
			listData: [],
			navTitle: '乐谱',

			tabindex: 0
		};
	},
	methods: {
		clickLeft() {
			uni.navigateBack();
		},

		// 查看乐谱详情
		changeMusicItem(item, index) {
			console.log(item, index, '查看歌曲');
			uni.navigateTo({
				url: `/pages/ownmusic/detail?id=${item.id}`
			});
		},

		getList(e) {
			API.searchSong(e)
				.then((res) => {
					console.log(res, '查询的乐谱列表');
					this.listData = res;
				})
				.catch((err) => {
					console.log(err);
				});
		},

		getList1() {
			API.getAllCategories().then((res) => {
				let data = handleTree(res);
				let obj = data.find((e) => e.id == this.tabindex);
				let leftData = obj.children;
				console.log('过滤的二级菜单', leftData, obj);
				let arr = [];
				for (let i = 0; i < leftData.length; i++) {
					arr.push(API.getSongsByCategory(leftData[i].id));
				}
				this.getSongs(arr);
			});
		},

		getSongs(arr) {
			Promise.all(arr).then((res) => {
				console.log(res.length, '长度');
				for (let i = 0; i < res.length; i++) {
					console.log(res[i], '查询的乐谱数据');
					this.listData = this.listData.concat(res[i]);
				}
			});
		}
	},
	onLoad(e) {
		if (e.title) {
			let title = e.title;
			this.getList(title);
		}
		if (e.id) {
			this.navTitle = e.title;
			this.tabindex = e.id;
			this.getList1();
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	position: relative;
	overflow: hidden;

	.bg {
		width: calc(100vw + 270rpx);
		height: 282rpx;
		background-color: rgba(23, 183, 109, 0.61);
		filter: blur(180rpx);
		position: absolute;
		top: 0rpx;
		left: -210rpx;
		z-index: 1;
	}

	.main {
		width: 100%;
		height: calc(100vh - 44px - var(--status-bar-height));
		position: relative;
		z-index: 2;
	}

	.box4 {
		padding: 0 32rpx;
		.box4_1 {
			width: 100%;
			height: 150rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #d8d8d8;

			.box4_1_l {
				flex: 1 0;
				width: 0;
				view:nth-child(1) {
					font-weight: 500;
					font-size: 36rpx;
					color: #333333;
					line-height: 52rpx;
					text-align: left;
					margin-bottom: 16rpx;
				}

				view:nth-child(2) {
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					line-height: 40rpx;
					text-align: left;
					display: flex;
					align-items: center;
					text {
						flex: 1;
					}
				}
			}
		}
	}
}
</style>